<template>
  <div class="evaluate-setting">
    <div class="card">
      <el-tabs v-model="activeTab" @tab-click="handleChangeTab">
        <el-tab-pane label="设置评价人" name="0" />
        <el-tab-pane label="设置被评人" name="1" />
      </el-tabs>
    </div>

    <div class="card">
      <div class="evaluate-setting__header">
        <el-button
          type="primary"
          size="mini"
          @click="handleOpenUserSelect"
        >
          {{ activeTab === '0' ? '设置评价人' : '设置被评人' }}
        </el-button>
      </div>
      <el-table
        v-loading="tableLoading"
        :data="settingsUser"
        border
        stripe
      >
        <el-table-column label="序号" type="index" align="center" width="80" />
        <el-table-column label="姓名" prop="user.username" align="center" />
        <el-table-column label="联系电话" prop="user.phone" align="center" />
        <el-table-column label="性别" prop="user.gender" align="center">
          <template v-slot="{ row }">
            <span v-if="row.user.gender == 1">男</span>
            <span v-else-if="row.user.gender == 0">女</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="user.gender" align="center">
          <template v-slot="{ row }">
            <el-button
              type="text"
              style="color: #FF4949;"
              @click="handleCancelSettingUser(row.id)"
            >
              取消设置
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--    <SelectList-->
    <!--      v-model="isSelected"-->
    <!--      :visible.sync="selectedListVisible"-->
    <!--      :title="activeTab === '0' ? '设置评价人' : '设置被评人'"-->
    <!--      :loading="loading"-->
    <!--      :list="userListFormat"-->
    <!--      multiple-->
    <!--      :max-choice="Infinity"-->
    <!--      :total="total"-->
    <!--      choices-disabled-->
    <!--      @onConfirm="handleConfirm"-->
    <!--      @onPageChange="handlePageChange"-->
    <!--      @onSearch="handleSearch"-->
    <!--    />-->

    <UserSelectModal
      v-model="isSelected"
      :visible.sync="selectedListVisible"
      :title="activeTab === '0' ? '设置评价人' : '设置被评人'"
      @onConfirm="handleConfirm"
    />
  </div>
</template>
<script>
import {
  getHaveSettingUsers,
  createEvaluateUsers,
  deleteEvaluateUsers,
  getUsersWaitEvaluate,
  addAppraisedPersonnel,
  removeAppraisedPersonnel
} from '@/api/evaluate'
import { getAllUser } from '@/api/v2/personnel'
import SelectList from '@/components/SelectList/SelectList.vue'
import { sleep } from '@/utils'
import UserSelectModal from '@/components/UserSelectModal/UserSelectModal.vue'
export default {
  name: '',
  components: {
    UserSelectModal,
    SelectList
  },
  data() {
    return {
      settingsUser: [],
      isSelected: [],
      selectedListVisible: false,
      loading: false,
      userList: [],
      // params: {
      //   username: '',
      //   page: 1,
      //   paginate: 10
      // },
      total: 0,
      tableLoading: false,
      activeTab: '0',
      searchValue: ''
    }
  },

  computed: {
    userListFormat() {
      return this.userList.map(item => {
        return {
          label: item.username,
          value: item.id
        }
      })
    }
  },

  created() {
    this.getHaveSettingUsers()
  },

  methods: {
    handleChangeTab() {
      if (this.activeTab === '0') {
        this.getHaveSettingUsers()
      } else {
        this.getUsersWaitEvaluate()
      }
    },

    async getHaveSettingUsers() {
      this.tableLoading = true
      try {
        const res = await getHaveSettingUsers()
        this.settingsUser = res.data
      } catch (error) {
        this.$message.error('获取评价人失败')
      } finally {
        await sleep(500)
        this.tableLoading = false
      }
    },

    async getUsersWaitEvaluate() {
      this.tableLoading = true
      try {
        const res = await getUsersWaitEvaluate()
        this.settingsUser = res.data
      } catch (error) {
        this.$message.error('获取评价人失败')
      } finally {
        await sleep(500)
        this.tableLoading = false
      }
    },

    async getUsers(params) {
      this.loading = true
      try {
        const res = await getAllUser(params)
        this.userList = res.data
        this.total = res.meta.total
      } catch (e) {
        throw new Error(e?.response?.data?.message || '用户列表获取失败')
      } finally {
        this.loading = false
      }
    },

    handleOpenUserSelect() {
      this.isSelected = this.settingsUser.map(item => item.user_id)
      this.getUsers()
      this.selectedListVisible = true
    },

    handleConfirm(e) {
      console.log('e --------->', e)
      if (this.activeTab === '0') {
        this.setEvaluateUsers(e)
      } else {
        this.addAppraisedPersonnel(e)
      }
    },

    handlePageChange(page, username) {
      this.getUsers({ page, username })
    },

    async setEvaluateUsers(selected) {
      try {
        const params = {
          user_ids: JSON.stringify(selected)
        }
        const res = await createEvaluateUsers(params)
        this.$message.success('设置成功')
        this.getHaveSettingUsers()
      } catch (error) {
        this.$message.error(error?.response?.data?.message || '设置失败')
      }
    },

    async addAppraisedPersonnel(selected) {
      try {
        const params = {
          personnel: JSON.stringify(selected)
        }
        const res = await addAppraisedPersonnel(params)
        this.$message.success('设置成功')
        this.getUsersWaitEvaluate()
      } catch (error) {
        this.$message.error(error?.response?.data?.message || '设置失败')
      }
    },

    handleSearch({ page, keyword }) {
      // this.params.page = page
      // this.params.username = keyword
      this.getUsers({ page, username: keyword })
    },

    handleCancelSettingUser(id) {
      if (this.activeTab === '0') {
        this.deleteEvaluateUsers(id)
      } else {
        this.removeAppraisedPersonnel(id)
      }
    },

    async deleteEvaluateUsers(id) {
      try {
        const res = deleteEvaluateUsers({ id })
        this.$message.success('取消成功')
        await this.getHaveSettingUsers()
      } catch (error) {
        this.$message.success('取消失败')
      }
    },

    async removeAppraisedPersonnel(id) {
      try {
        const res = await removeAppraisedPersonnel({ id })
        this.$message.success('取消成功')
        await this.getUsersWaitEvaluate()
      } catch (error) {
        this.$message.success('取消失败')
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.evaluate-setting {
  padding: 20px;

  &__header {
    margin-bottom: 20px;
  }

}
</style>
